<template>
  <el-row id="energy-varieties-container">

    <el-row class="tittle-nav">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#17252f"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect" >
        <el-menu-item index="1">能源品种</el-menu-item>
        <el-menu-item index="2">能耗工质</el-menu-item>
        <el-menu-item index="3">非能源产品</el-menu-item>
        <el-menu-item index="4">能效指标</el-menu-item>
        <el-menu-item index="5">经营指标</el-menu-item>
        <el-menu-item index="6">其他数据</el-menu-item>
        <el-menu-item index="7">能源用途</el-menu-item>
      </el-menu>
    </el-row>

    <el-row v-show="isShowVarieties">
      <energy-varieties></energy-varieties>
    </el-row>

    <el-row v-show="isShowMedium">
      <energy-medium></energy-medium>
    </el-row>

    <el-row v-show="isShowUnPower">
      <energy-unpower></energy-unpower>
    </el-row>

    <el-row v-show="isShowEfficiency">
      <energy-efficiency></energy-efficiency>
    </el-row>

    <el-row v-show="isShowBusiness">
      <energy-business></energy-business>
    </el-row>

    <el-row v-show="isShowOther">
      <energy-other></energy-other>
    </el-row>

    <el-row v-show="isShowVarietiesUse">
      <energy-use></energy-use>
    </el-row>


  </el-row>

</template>

<script>
    import EnergyVarieties from "../../../components/EnergyVarieties/energyVarieties";
    import EnergyUse from "../../../components/EnergyVarieties/energyUse";
    import EnergyMedium from "../../../components/EnergyVarieties/energyMedium";
    import EnergyUnpower from "../../../components/EnergyVarieties/energyUnpower";
    import EnergyEfficiency from "../../../components/EnergyVarieties/energyEfficiency";
    import EnergyBusiness from "../../../components/EnergyVarieties/energyBusiness";
    import EnergyOther from "../../../components/EnergyVarieties/energyOther";
    export default {
        name: "index",
      components: {
        EnergyOther,
        EnergyBusiness, EnergyEfficiency, EnergyUnpower, EnergyMedium, EnergyUse, EnergyVarieties},
      data(){
          return {
            activeIndex:'1',
            isShowVarieties: true,
            isShowMedium: false,
            isShowUnPower: false,
            isShowEfficiency: false,
            isShowBusiness: false,
            isShowOther: false,
            isShowVarietiesUse: false
          }
        },
      created() {
        this.$emit('fixHeadIndex', "5")
      },
        methods:{
          handleSelect(key){
            this.activeIndex = key
            switch (key) {
              case "1":{
                this.isShowVarieties = true
                this.isShowMedium = false
                this.isShowUnPower = false
                this.isShowEfficiency = false
                this.isShowBusiness = false
                this.isShowOther = false
                this.isShowVarietiesUse = false
                break
              }
              case "2":{
                this.isShowVarieties = false
                this.isShowMedium = true
                this.isShowUnPower = false
                this.isShowEfficiency = false
                this.isShowBusiness = false
                this.isShowOther = false
                this.isShowVarietiesUse = false
                break
              }
              case "3":{
                this.isShowVarieties = false
                this.isShowMedium = false
                this.isShowUnPower = true
                this.isShowEfficiency = false
                this.isShowBusiness = false
                this.isShowOther = false
                this.isShowVarietiesUse = false
                break
              }
              case "4":{
                this.isShowVarieties = false
                this.isShowMedium = false
                this.isShowUnPower = false
                this.isShowEfficiency = true
                this.isShowBusiness = false
                this.isShowOther = false
                this.isShowVarietiesUse = false
                break
              }
              case "5":{
                this.isShowVarieties = false
                this.isShowMedium = false
                this.isShowUnPower = false
                this.isShowEfficiency = false
                this.isShowBusiness = true
                this.isShowOther = false
                this.isShowVarietiesUse = false
                break
              }
              case "6":{
                this.isShowVarieties = false
                this.isShowMedium = false
                this.isShowUnPower = false
                this.isShowEfficiency = false
                this.isShowBusiness = false
                this.isShowOther = true
                this.isShowVarietiesUse = false
                break
              }
              case "7":{
                this.isShowVarieties = false
                this.isShowMedium = false
                this.isShowUnPower = false
                this.isShowEfficiency = false
                this.isShowBusiness = false
                this.isShowOther = false
                this.isShowVarietiesUse = true
                break
              }
            }
          }
        }
    }
</script>

<style lang="scss">
#energy-varieties-container{

  .tittle-nav{
    height: 50px;
    background-color: #17252f;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-menu {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;
  }

  .el-menu--horizontal > .el-menu-item {
    height: 50px!important;
    line-height: 50px!important;
    margin: 0;
    border-bottom: 0px solid transparent;
  }

  .el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6;
  }

  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: 0px solid #303133;
    color: #303133;
  }

}
</style>
